<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>Ketcher</title>
        <link rel="stylesheet" type="text/css" href="ketcher.css" />
        <script type="text/javascript" src="prototype-min.js"></script>
        <script type="text/javascript" src="raphael-min.js"></script>
        <script type="text/javascript" src="chem/common.js"></script>
        <script type="text/javascript" src="chem/vec2.js"></script>
        <script type="text/javascript" src="chem/map.js"></script>
        <script type="text/javascript" src="chem/pool.js"></script>
        <script type="text/javascript" src="chem/element.js"></script>
        <script type="text/javascript" src="chem/molecule.js"></script>
        <script type="text/javascript" src="chem/molfile.js"></script>
        <script type="text/javascript" src="chem/sgroup.js"></script>
        <script type="text/javascript" src="chem/dfs.js"></script>
        <script type="text/javascript" src="chem/cis_trans.js"></script>
        <script type="text/javascript" src="chem/stereocenters.js"></script>
        <script type="text/javascript" src="chem/smiles.js"></script>
        <script type="text/javascript" src="rnd/events.js"></script>
        <script type="text/javascript" src="rnd/visel.js"></script>
        <script type="text/javascript" src="rnd/moldata.js"></script>
        <script type="text/javascript" src="rnd/moldata_valence.js"></script>
        <script type="text/javascript" src="rnd/drawing.js"></script>
        <script type="text/javascript" src="rnd/render.js"></script>
        <script type="text/javascript" src="ui/log.js"></script>
        <script type="text/javascript" src="ui/ui.js"></script>
        <script type="text/javascript" src="ketcher.js"></script>
    </head>

    <body onload="ketcher.init()">
        <div>
            <table id="ketcher_window">
                <tr align="center" id="main_toolbar">
                    <td style="width:36px"><img class="sideButton" id="select_simple" src="png/arrow.png" alt="" title="Element Selection (Esc)" /></td>
                    <td class="toolDelimiter"></td>
                    <!--td style="width:36px"><object type="image/svg+xml" width="28" height="28" data="svg/document-new28x28.svg"></object></td-->
                    <td class="toolButton" id="new"><img src="png/document-new.png" alt="" title="New (Ctrl+N)" /></td>
                    <td class="toolButton" id="open"><img src="png/document-open.png" alt="" title="Open... (Ctrl+O)" /></td>
                    <td class="toolButton" id="save"><img src="png/document-save-as.png" alt="" title="Save As... (Ctrl+S)" /></td>
                    <td class="toolDelimiter"></td>
                    <td class="toolButton buttonDisabled" id="undo"><img src="png/edit-undo.png" alt="" title="Undo (Ctrl+Z)" /></td>
                    <td class="toolButton buttonDisabled" id="redo"><img src="png/edit-redo.png" alt="" title="Redo (Ctrl+Shift+Z)" /></td>
                    <td class="toolButton buttonDisabled" id="cut"><img src="png/edit-cut.png" alt="" title="Cut (Ctrl+X)" /></td>
                    <td class="toolButton buttonDisabled" id="copy"><img src="png/edit-copy.png" alt="" title="Copy (Ctrl+C)" /></td>
                    <td class="toolButton buttonDisabled" id="paste"><img src="png/edit-paste.png" alt="" title="Paste (Ctrl+V)" /></td>
                    <td class="toolDelimiter"></td>
                    <td class="toolButton" id="zoom_in"><img src="png/view-zoom-in.png" alt="" title="Zoom In (+)" /></td>
                    <td class="toolButton" id="zoom_out"><img src="png/view-zoom-out.png" alt="" title="Zoom Out (-)" /></td>
                    <td class="toolDelimiter"></td>
                    <td class="toolButton serverRequired" id="clean_up"><img src="png/layout.png" alt="" title="Clean Up (Ctrl+L)" /></td>
                    <td style="width:100%"></td>
                    <td style="width:36px;padding:0px 0px 0px 1px;"><a href="http://www.ggasoftware.com/" target="_blank"><img src="png/logo.png" alt="" title="GGA Software Services" /></a></td>
                </tr>
                <!--tr align="center">
                    <td style="height:0px"></td>
                    <td colspan="15" rowspan="13"><div id="client_area"></div></td>
                    <td style="height:0px"></td>
                </tr-->
                <tr align="center" style="height:34px">
                    <!--td><object class="sideButton" type="image/svg+xml" width="32" height="32" data="svg/anybond.svg"></object></td-->
                    <td><img class="sideButton" id="select_erase" src="png/edit-clear.png" alt="" title="Erase" /></td>
                    <td colspan="16" rowspan="14"><div id="client_area"></div></td>
                    <td></td>
                </tr>
                <tr align="center" style="height:34px">
                    <td><img class="sideButton" id="bond_any" src="png/anybond.png" alt="" title="Any Bond (0)" /></td>
                    <td><img class="sideButton" id="atom_any" src="png/anyatom.png" alt="" title="Any Atom (A)" /></td>
                </tr>
                <tr align="center" style="height:34px">
                    <td><img class="sideButton" id="bond_single" src="png/single.png" alt="" title="Single Bond (1)" /></td>
                    <td><img class="sideButton" id="atom_h" src="png/h.png" alt="" title="H Atom (H)" /></td>
                </tr>
                <tr align="center" style="height:34px">
                    <td><img class="sideButton" id="bond_up" src="png/up.png" alt="" title="Single Up Bond (1)" /></td>
                    <td><img class="sideButton" id="atom_c" src="png/c.png" alt="" title="C Atom (C)" /></td>
                </tr>
                <tr align="center" style="height:34px">
                    <td><img class="sideButton" id="bond_down" src="png/down.png" alt="" title="Single Down Bond (1)" /></td>
                    <td><img class="sideButton" id="atom_n" src="png/n.png" alt="" title="N Atom (N)" /></td>
                </tr>
                <tr align="center" style="height:34px">
                    <td><img class="sideButton" id="bond_double" src="png/double.png" alt="" title="Double Bond (2)" /></td>
                    <td><img class="sideButton" id="atom_o" src="png/o.png" alt="" title="O Atom (O)" /></td>
                </tr>
                <tr align="center" style="height:34px">
                    <td><img class="sideButton" id="bond_triple" src="png/triple.png" alt="" title="Triple Bond (3)" /></td>
                    <td><img class="sideButton" id="atom_s" src="png/s.png" alt="" title="S Atom (S)" /></td>
                </tr>
                <tr align="center" style="height:34px">
                    <td><img class="sideButton" id="bond_aromatic" src="png/aromatic.png" alt="" title="Aromatic Bond (4)" /></td>
                    <td><img class="sideButton" id="atom_f" src="png/f.png" alt="" title="F Atom (F)" /></td>
                </tr>
                <tr align="center" style="height:34px">
                    <td><img class="sideButton" id="pattern_six1" src="png/hexa1.png" alt="" title="Benzene (R)" /></td>
                    <td><img class="sideButton" id="atom_p" src="png/p.png" alt="" title="P Atom (P)" /></td>
                </tr>
                <tr align="center" style="height:34px">
                    <td><img class="sideButton" id="pattern_six2" src="png/hexa2.png" alt="" title="Cyclohexane (R)" /></td>
                    <td><img class="sideButton" id="atom_cl" src="png/cl.png" alt="" title="Cl Atom (Shift+C)" /></td>
                </tr>
                <tr align="center" style="height:34px">
                    <td><img class="sideButton" id="pattern_five" src="png/penta.png" alt="" title="Cyclopentane (R)" /></td>
                    <td><img class="sideButton" id="atom_br" src="png/br.png" alt="" title="Br Atom (Shift+B)" /></td>
                </tr>
                <tr align="center" style="height:34px">
                    <td><img class="sideButton" id="sgroup" src="png/sgroup.png" alt="" title="S-Group (Ctrl+G)" /></td>
                    <td><img class="sideButton" id="atom_i" src="png/i.png" alt="" title="I Atom (I)" /></td>
                </tr>
                <!--tr align="center" style="height:34px">
                    <td><img class="sideButton buttonDisabled" id="pattern_naphthalene" src="png/naphthalene.png" alt="" title="Naphthalene" /></td>
                    <td></td>
                </tr-->
                <tr>
                    <td style="height:100%"></td>
                </tr>
                <tr>
                    <td colspan="19"></td>
                </tr>
            </table>
            
            <input id="input_label" type="text" maxlength="4" size="4" style="display:none;" />
            
            <div id="window_cover" style="display:none;"><div id="loading" style="display:none;"></div></div>

            <div class="dialogWindow fileDialog" id="open_file" style="display:none;">
                <div style="width:100%">
                    <div>
                        Open File
                    </div>
                    <div style="height:0.5em"></div>
                    <div class="serverRequired" style="font-size:small">
                        <input type="radio" id="radio_open_from_input" name="input_source" checked>Input</input>
                        <input type="radio" id="radio_open_from_file" name="input_source">File</input>
                    </div>
                    <div class="serverRequired" id="open_from_file">
                        <form id="upload_mol" style="margin-top:4px" action="open" enctype="multipart/form-data" target="buffer_frame" method="post">
                            <input type="file" name="filedata" id="molfile_path" />
                            <div style="margin-top:0.5em;text-align:center">
                                <input id="upload_cancel" type="button" value="Cancel" />
                                <input type="submit" value="OK" />
                            </div>
                        </form>
                    </div>
                    <div style="margin:4px;" id="open_from_input">
                        <textarea class="chemicalText" id="input_mol"></textarea>
                        <div style="margin-top:0.5em;text-align:center">
                            <input id="read_cancel" type="button" value="Cancel" />
                            <input id="read_ok" type="submit" value="OK" />
                        </div>
                    </div>
                </div>
            </div>

            <div class="dialogWindow fileDialog" id="save_file" style="display:none;">
                <div style="width:100%">
                    <div>
                        Save File
                    </div>
                    <div style="height:0.5em"></div>
                    <div>
                        <label>Format:</label>
                        <select id="file_format">Format:
                            <option value="mol">MDL/Symyx Molfile</option>
                            <option value="smi">Daylight SMILES</option>
                            <!--option value="png">Portable Network Graphics PNG</option>
                            <option value="svg">Scalable Vector Graphics SVG</option-->
                        </select>
                    </div>
                    <div style="margin:4px;">
                        <textarea class="chemicalText" id="output_mol" readonly></textarea>
                        <form  id="download_mol" style="margin-top:0.5em;text-align:center" action="save" enctype="multipart/form-data" target="_self" method="post">
                            <input type="hidden" id="mol_data" name="filedata" />
                            <input type="submit" class="serverRequired" value="Save..." />
                            <input id="save_ok" type="button" value="Close" />
                        </form>
                    </div>
                </div>
            </div>

            <div class="dialogWindow propDialog" id="atom_properties" style="display:none;">
                <div style="width:100%">
                    <div>
                        Atom Properties
                    </div>
                    <div style="height:0.5em"></div>
                    <table style="text-align:left">
                        <tr>
                            <td>
                                <label>Label:</label>
                            </td>
                            <td>
                                <input id="atom_label" type="text" maxlength="2" size="3" />
                            </td>
                            <td>
                                <label>Number:</label>
                            </td>
                            <td>
                                <label id="atom_number"></label>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <label>Charge:</label>
                            </td>
                            <td>
                                <select id="atom_charge">
                                    <option value="3">+3</option>
                                    <option value="2">+2</option>
                                    <option value="1">+1</option>
                                    <option value="0">0</option>
                                    <option value="-1">-1</option>
                                    <option value="-2">-2</option>
                                    <option value="-3">-3</option>
                                </select>
                            </td>
                            <td>
                                <label>Isotope:</label>
                            </td>
                            <td>
                                <input id="atom_isotope" type="text" maxlength="3" size="3" />
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <label>Valence:</label>
                            </td>
                            <td>
                                <input id="atom_valence" type="text" maxlength="1" size="3" />
                            </td>
                            <td>
                                <label>Radical:</label>
                            </td>
                            <td>
                                <select id="atom_radical">
                                    <option value="0"></option>
                                    <option value="1">Singlet</option>
                                    <option value="2">Doublet</option>
                                    <option value="3">Triplet</option>
                                </select>
                            </td>
                        </tr>
                    </table>
                    <div style="margin-top:0.5em">
                        <input id="atom_prop_cancel" type="button" value="Cancel" />
                        <input id="atom_prop_ok"type="button" value="OK" />
                    </div>
                </div>
            </div>

            <div class="dialogWindow sgroupDialog" id="sgroup_properties" style="display:none;">
                <div style="width:100%">
                    <div>
                        S-Group Properties
                    </div>
                    <div style="height:0.5em"></div>
                    <table style="text-align:left">
                        <tr>
                            <td>
                                <label>Type:</label>
                            </td>
                            <td>
                                <select id="sgroup_type">
                                    <option value="GEN">Generic</option>
                                    <option value="MUL">Multiple group</option>
                                    <option value="SRU">SRU polymer</option>
                                    <option value="SUP">Superatom</option>
                                </select>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <label>Connection:</label>
                            </td>
                            <td>
                                <select id="sgroup_connection">
                                    <option value="ht">Head-to-tail</option>
                                    <option value="hh">Head-to-head</option>
                                    <option value="eu">Either unknown</option>
                                </select>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <label>Label (subscript):</label>
                            </td>
                            <td>
                                <input id="sgroup_label" type="text" maxlength="15" size="15" />
                            </td>
                        </tr>
                    </table>
                    <div style="margin-top:0.5em">
                        <input id="sgroup_prop_cancel" type="button" value="Cancel" />
                        <input id="sgroup_prop_ok"type="button" value="OK" />
                    </div>
                </div>
            </div>

            <iframe name="buffer_frame" id="buffer_frame" src="about:blank" style="display:none">
            </iframe>
        </div>
    </body>
</html>
